<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:include="inc_css.html">
    <link th:include="inc.html">
</head>
<body>
<div id="message" style="position: absolute;width: 100%">
    <div class="tile" th:style="'background:#'+${color}">
        <div class="tile-body" th:text="${message}" style="color: #FFFFFF"></div>
    </div>
</div>
<section class="material-half-bg">
    <div class="cover"></div>
</section>
<section class="login-content">
    <div class="logo">
        <h1>Huc</h1>
    </div>
    <div class="login-box">
        <form class="login-form" action="/operation/login" method="post">
            <h3 class="login-head"><i class="fa fa-lg fa-fw fa-user"></i>SIGN IN</h3>
            <div class="form-group">
                <label class="control-label">USERNAME</label>
                <input class="form-control" type="text" placeholder="UserName" name="username" autofocus required>
            </div>
            <div class="form-group">
                <label class="control-label">PASSWORD</label>
                <input class="form-control" type="password" placeholder="Password" name="password" required>
            </div>
            <div class="form-group">
                <div class="utility">
                    <div class="animated-checkbox">
                        <label>
                            <input type="checkbox"><span class="label-text">Stay Signed in</span>
                        </label>
                    </div>
                    <!--<p class="semibold-text mb-2"><a href="#" data-toggle="flip">Forgot Password ?</a></p>-->
                </div>
            </div>
            <div class="form-group btn-container">
                <button class="btn btn-primary btn-block" type="submit"><i class="fa fa-sign-in fa-lg fa-fw"></i>SIGN IN
                </button>
            </div>
        </form>
        <form class="forget-form" action="index.html">
            <h3 class="login-head"><i class="fa fa-lg fa-fw fa-lock"></i>Forgot Password ?</h3>
            <div class="form-group">
                <label class="control-label">EMAIL</label>
                <input class="form-control" type="text" placeholder="Email">
            </div>
            <div class="form-group btn-container">
                <button class="btn btn-primary btn-block"><i class="fa fa-unlock fa-lg fa-fw"></i>RESET</button>
            </div>
            <div class="form-group mt-3">
                <p class="semibold-text mb-0"><a href="#" data-toggle="flip"><i class="fa fa-angle-left fa-fw"></i> Back
                    to Login</a></p>
            </div>
        </form>
    </div>
</section>
<script type="text/javascript">
    // Login Page Flipbox control
    $('.login-content [data-toggle="flip"]').click(function () {
        $('.login-box').toggleClass('flipped');
        return false;
    });

    $(function () {

        $("#message").hide();

        var is_show = [[${is_show}]];
        if (is_show == 1) {
            $("#message").slideDown(1000);
            setTimeout(message_hide, 2000);
        }

    })

    //隐藏消息
    function message_hide() {
        $("#message").slideUp(1000);
    }
</script>
</body>
</html>